<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue实例模板</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    
    <div id="app">
        <input type="checkbox" v-model="toggleValue"@change="id='顾客'">是否会员{{toggleValue}}<br>
        <select v-show="toggleValue==true" v-model="id">
            <option value="钻石">钻石会员</option>
            <option value="白金">白金会员</option>
            <option value="黄金">黄金会员</option>
        </select>{{id}}<br>
        数量:<input type="text" v-model="count">{{count}}<br>
        单价:<input type="text" v-model.lazy="price" @keydown.enter="visible=!visible">{{price}}
        <div v-show="visible">
            尊敬的{{id}},你购买的数量是{{count}},单价是{{price}},折扣是{{discount}},总价是{{count*price*discount}}
        </div>
    </div>


</body>
</html>

<script>
    //创建一个vue实例
    const  appConn = Vue.createApp({
        data() {
            return {
                count:'',
                price:'',
                toggleValue:true,
                id:'顾客',
                visible:false
            }
        },
        methods: {
            
        },
        computed:{
            discount(){
                if(this.id=='顾客')
                return 1
                else if(this.id=='钻石')
                return 0.5
                else if(this.id=='白金')
                return 0.6
                else(this.id=='黄金')
                return 0.8
            }
        },
        // total(){
        //     return this.num * this.price * this.discount
        // }
    }).mount("#app") 
</script>